<template>
  <div class="bigHome" :style="{ height: visible ? '60vh' : '100vh' }">
    <div class="head">
      <h2>仿真评估</h2>
    </div>
    <div class="bigContent">
      <div class="treeNode">
        <div class="treetop">
          <div
            v-for="(item, index) in treeTitle"
            :key="index"
            class="myTreeTitle"
            :style="{ backgroundColor: index == cutTob ? 'red' : '' }"
            @click="topqh(index)"
          >
            {{ item }}
          </div>
        </div>
        <div class="treeContent">
          <div class="treeNodeData">
            <RadioTree v-show="cutTob == 0"></RadioTree>
            <SumTree v-show="cutTob == 1"></SumTree>
          </div>
        </div>
      </div>
      <div class="listData">
        <div class="listData-one">
          <HomeRightList v-show="cutTob == 0" ref="radio"></HomeRightList>
          <HomeRightSumList
            v-show="cutTob == 1"
            ref="checked"
          ></HomeRightSumList>
        </div>
        <div class="btn">
          <el-button type="danger" v-if="visible" @click="myCancel()"
            >取消</el-button
          >
          <el-button type="success" @click="confirm()">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import RadioTree from "@/views/treeNode/RadioTree.vue";
import SumTree from "@/views/treeNode/SumTree.vue";
import HomeRightList from "@/views/List/HomeRightList.vue";
import HomeRightSumList from "@/views/List/HomeRightSumList.vue";

import { mapState, mapMutations, mapActions } from "vuex";
export default {
  props: {
    visible: {
      default: false,
      type: Boolean,
    },
  },
  components: {
    RadioTree,
    SumTree,
    HomeRightList,
    HomeRightSumList,
  },
  data() {
    return {
      cutTob: 0,
      treeTitle: ["单次仿真评估", "汇总仿真评估"],
    };
  },
  methods: {
     ...mapMutations(["cutTabNum",'cutTabNums']),
    topqh(val) {
      //tab 切换
      this.cutTob = val;
    },

    //确认按钮
    confirm() {
      if (this.cutTob == 0) {
          
        if (!this.$refs.radio.currentRow) {
          this.$message({
            message: "请选择数据",
            type: "warning",
          });
          return;
        } else {
          console.log(this.$refs.radio.currentRow);
          this.cutTabNums('0') 
          if (this.visible) {
          
            this.$emit("myconfirmDialog");
          } else {
            this.$router.push("/about");
          }
        }
      }
      if (this.cutTob == 1) {
         
        if (this.$refs.checked.multipleSelection.length == 0) {
          this.$message({
            message: "请选择数据",
            type: "warning",
          });
          return;
        } else {
          console.log(this.$refs.checked.multipleSelection);
           this.cutTabNum('3')
          if (this.visible) {
           
            this.$emit("myconfirmDialog");
             
          } else {
            // this.cutTabNum('3')
            this.$router.push("/about");
          }
        }
      }
    },
    //取消
    myCancel() {
      this.$emit("mycloseDialog");
    },
  },
};
</script>
<style lang="less" scope>
.bigHome {
  overflow: auto;
  .head {
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
  .bigContent {
    display: flex;
    padding: 0 10px;
    .treeNode {
      width: 300px;
      height: calc(100vh - 60px);
      border: 1px solid blue;
      margin-right: 10px;
    }
    .listData {
      // flex: 1;
      width: calc(100vw - 300px);
      height: calc(100vh - 60px);
      border: 1px solid black;
      padding: 10px;
      .listData-one {
        width: 100%;
        height: calc(100vh - 120px);
        padding: 10px;
      }
      .btn {
        text-align: center;
        margin-top: 5px;
      }
    }
  }
  .treetop {
    display: flex;
    justify-content: space-around;
    text-align: center;
    .myTreeTitle {
      height: 30px;
      width: 100%;
      border: 1px solid blue;
      cursor: pointer;
    }
  }
  .treeContent {
    padding: 5px;
    .treeNodeData {
      width: 100%;
      height: calc(100vh - 102px);
    }
  }
}
</style>
